<template>
  <div class="container flc pad_10_16" :style="{ paddingTop: `${45 + statusBarHeight}px` }">
    <NavBar 
      :navBarStyle="{
        backgroundColor: navBarBg,
        height: `${45 + statusBarHeight}px`,
        paddingTop: `${statusBarHeight}px`,
      }"
      pageName="剧本列表"
      @onLeftClick="leftBack" 
    />
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <div class="wb bg_fff fl vc bkra16 pad_12 mb10" v-for="item in scriptList" :key="item.id" @click="goDetail(item.scriptId)">
        <div class="xddw fls">
          <van-image
            width="74px"
            height="112px"
            radius="5px"
            lazy-load
            fit="cover"
            :src="item.coverUrl"
            v-if="item.coverUrl"
          />
          <div v-else style="width:74px; height: 112px;" class="bkra5 flvcc bg_ED">
            <img src="@/assets/images/script_cover.png" class="wb" />
          </div>
          <div class="script_tag">
            <img src="@/assets/images/icon_tag.png" class="wb" />
            <p class="tag_text">{{ BRE_SCRIPT_TYPE[item.type] }}</p>
          </div>
        </div>
        <div class="pdl_12 fl1 flau">
          <p class="ct dx_18 omit wb">{{ item.title }}</p>
          <div class="wb flau fl vc color_666 dx_12 mt8">
            <span class="mr10">{{item.roleNum}}人</span><span v-for="(tag, index) in item.tag.slice(0, 4)" :key="index" class="mr10">{{ tag }}</span>
          </div>
          <p class="dx_12 color_888 omit wb mt16">{{ item.summary }}</p>
          <div class="flvcbt mt8" v-if="
            item.type != 0 &&
            item.type != 1 &&
            item.type != 2
          ">
            <div>
              <div class="apply_wrap fl vc" v-if="item.applicationProcessStatus >= 10 && item.applicationProcessStatus < 20"><p class="circle"></p>{{ item.applicationType == 0 ? '免费' : '充值' }}申领</div>
              <div class="apply_wrap fl vc" v-if="item.applicationProcessStatus === 0"><p class="circle"></p>待申领</div>
              <div class="apply_wrap fl vc" v-if="item.applicationProcessStatus == 20"><p class="circle"></p>关闭申领</div>
            </div>
            <img src="@/assets/images/icon_setting.png" class="img24" @click.stop="toApplySetting(item.title, item.id)" />
          </div>
        </div>
      </div>
    </van-list>
  </div>
</template>

<script>
import NavBar from '@/components/NavBar/NavBar.vue'
import { List } from 'vant';
import { Toast } from 'vant';
import { navOtherHeight, BRE_SCRIPT_TYPE } from '@/config/config'
import { getScriptList } from '@/api/script.js'

export default {
  components: {
    [List.name]: List,
    NavBar
  },

  data() {
    return {
      navBarBg: 'transparent',
      tagBg: 'transparent',
      tagBg2: 'rgba(255, 255, 255, 0.1)',
      navigationHeight: 47,
      statusBarHeight: 0,
      navOtherHeight,
      BRE_SCRIPT_TYPE,
      queryParams: {
        pageNum: 1,
        pageSize: 10
      },
      loading: true,
      finished: false,
      scriptList: []
    };
  },

  watch: {
    "$store.state.token": {
      handler:function() { 
        this.getScriptList()
      }
    }
  },

  created() {
    this.getAPPNavHeight()
    if (this.$store.state.token) {
      this.getScriptList()
    }
  },

  mounted () {
    window.addEventListener('scroll', this.watchScroll)
  },
  beforeDestroy () {
    window.removeEventListener('scroll')
  },

  methods: {
    onLoad() {
      console.log('到底')
      this.queryParams.pageNum += 1
      this.getScriptList()
    },

    toApplySetting() {
      // this.$router.push({ name: 'applySetting', query: { name: name, id: id } })
      Toast({
        message: '请到web版柒巧空间进行申领配置'
      })
    },

    watchScroll () {
      const scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop
      const opacity = Math.abs(Math.round(scrollTop)) / 100

      if (scrollTop > 100) {
        this.tagBg = `rgba(209, 251, 113, 1)`
        this.tagBg2 = `rgba(209, 251, 113, 1)`
      } else {
        this.tagBg = 'transparent'
        this.tagBg2 = 'rgba(255, 255, 255, 0.1)'
      }
      this.navBarBg = `rgba(209, 251, 113, ${opacity})`
    },

    leftBack () {
      console.log('点击了', window)
      if (window.androidJSBridge) {
        window.androidJSBridge.back()
      } else if (window.webkit) {
        console.log('ios')
        window.webkit.messageHandlers.back.postMessage({})
      }
    },

    // 跳转剧本详情
    goDetail(scriptId) {
      console.log('scriptId:', scriptId)
      const params = JSON.stringify({ scriptId: scriptId })
      if (window.androidJSBridge) {
        window.androidJSBridge.scriptDetail(params)
      } else if (window.webkit) {
        console.log('ios')
        window.webkit.messageHandlers.scriptDetail.postMessage(params)
      }
    },

    getAPPNavHeight () {
      console.log('--appNavigation--', window)
      if (window.androidJSBridge) {
        const result = JSON.parse(window.androidJSBridge.appNavigation())
        this.navigationHeight = result.navigationHeight
        this.statusBarHeight = result.statusBarHeight
        document.documentElement.style.setProperty('--navHeight', this.navigationHeight + 'px')
        console.log('android1', result)
      } else if (window.webkit) {
        console.log('ios-appNavigation')
        window.appNavigation = this.onAppNavigation
        window.webkit.messageHandlers.appNavigation.postMessage({})
      } else {
        this.navigationHeight = 0
        document.documentElement.style.setProperty('--navHeight', this.navigationHeight + 'px')
      }
    },

    onAppNavigation (result) {
      console.log('ios--appNavigation', result)
      this.navigationHeight = Number(result.navigationHeight)
      this.statusBarHeight = Number(result.statusBarHeight)
      document.documentElement.style.setProperty('--navHeight', this.navigationHeight + 'px')
    },

    // 获取剧本列表
    async getScriptList () {
      try {
        const params = {
          request: {
            ...this.queryParams
          }
        }
        const res = await getScriptList(params)
        console.log('剧本列表', res)
        if (res.errorCode === 0) {
          if (res.response.records.length) {
            this.scriptList = this.queryParams.pageNum > 1 ? [...this.scriptList, ...res.response.records] : res.response.records
          }
          else {
            this.scriptList = this.queryParams.pageNum > 1 ? this.scriptList : res.response.records
          }
          if (res.response.records.length < this.queryParams.pageSize) {
            this.finished = true
            this.loading = true
          } else {
            this.finished = false
            this.loading = false
          }
        }
      } catch (error) {
        console.error(error)
      }
    },
  }
};
</script>

<style lang="less">
.container {
  height: calc(100vh - var(--navHeight));
}
.pad_10_16 {
  padding: 10px 16px;
}
.pad_12 {
  padding: 12px;
}
.script_tag {
  position: absolute;
  left: 0;
  top: 0;
  width: 32px;
}
.tag_text {
  position: absolute;
  left: 0;
  top: 0;
  padding: 2px 4px;
  color: #fff;
  font-size: 10px;
}
.pdl_12 {
  padding-left: 12px;
}
.color_888 {
  color: #888888;
}
.circle {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #000;
  margin-right: 4px;
}
.apply_wrap {
  border-radius: 6px;
  background: linear-gradient(90deg, rgba(209, 251, 113, 0.32) 0%, rgba(209, 251, 113, 0.00) 100%);
  font-size: 15px;
  padding: 4px 8px;
}

</style>
